<template>
    <div>
        <MTNavBar title="商品列表"></MTNavBar>
        <div class="header-group">
            <el-row>
                <el-col :span="6">
                    <img :src="merchant.logo" alt="" class="logo">
                </el-col>
                <el-col :span="18">
                    <div style="padding: 10px; color: white">
                        <span>20分钟</span> | <span>1Km</span>
                        <p class="notice">{{merchant.notice }}</p>
                    </div>
                </el-col>
            </el-row>
        </div>
        <van-tabs class="tab-group" v-model:active="tabActive">

            <van-tab title="点菜">

                <div class="menu-group" :style="menuHeightStyle">

                    <div class="category-group" id="category" ref="category">
                        <ul class="category-list">
                            <li :class="index === currentIndex ? 'active' : null"
                                v-for="(category, index) in categories"
                                :key="category.name"
                                @click="categoryClicked(index)"
                            >{{ category.name }}
                            </li>
                        </ul>
                    </div>

                    <div class="goods-group" ref="goods">
                        <div class="goods-list">
                            <dl v-for="(category,category_index) in categories" :key="categories.name" class="goods-dl">
                                <dt class="category-name">{{ category.name }}</dt>
                                <dd class="goods-item" v-for="(goods,goods_index) in category.goods_list"
                                    :key="goods.id">
                                    <img :src="goods.picture" alt="m" class="thumbnail"
                                         @click="goodsClick(category_index,goods_index)">
                                    <div class="goods-info" @click="goodsClick(category_index,goods_index)">
                                        <div class="goods-name">{{ goods.name }}</div>
                                        <div class="month-sale">月售: 10</div>
                                        <div class="price">￥{{ goods.price }}</div>

                                    </div>
                                    <div class="stepper-group">
                                        <van-stepper min="0" default-value="0" v-model="goods.count"/>
                                    </div>
                                </dd>
                            </dl>
                        </div>
                    </div>

                </div>
            </van-tab>
            <van-tab title="评价">内容 2</van-tab>
            <van-tab title="商家">内容 3</van-tab>

        </van-tabs>


        <good-detail :goods="goodsDetail"></good-detail>
        <cart :categories="categories"></cart>
    </div>
</template>

<script>
import BScroll from "@better-scroll/core";
import kfc from "../../data/kfc"
import GoodDetail from "@/components/merchant/goodDetail.vue";
import goodDetail from "@/components/merchant/goodDetail.vue";
import Cart from "@/components/merchant/Cart.vue";
import MTNavBar from "@/components/common/FYNavBar.vue";

export default {
    name: "Merchant",
    components: {MTNavBar, Cart, GoodDetail},
    data() {
        return {
            tabActive: 0,
            categories: [],
            positions: [],
            menuScroll: null,
            goodsScroll: null,
            currentIndex: 0,
            goodsDetail: null,
            value: 0,
            merchant: {
                notice: 'notice',
                logo: ''
            },
        }
    },
    methods: {
        goodsClick(category_index, goods_index) {
            let categories = this.categories[category_index]
            this.goodsDetail = JSON.parse(JSON.stringify(categories.goods_list[goods_index]))
        },
        onClickLeft() {
            this.$router.back()
        },
        categoryClicked(index) {
            // alert(index)
            let offset = this.positions[index];
            let sumOffset = 0;
            for (let temp of this.positions) {
                sumOffset += temp;
            }
            // this.goodsScroll.scrollBy(0, sumOffset,1000)
            this.goodsScroll.scrollTo(0, -offset, 500)
            this.currentIndex = index
        }
    },
    mounted() {
        const merchant_id = this.$route.params.merchant_id;
        this.$http.get(`merchant/${merchant_id}`, {}).then(resp => {
            this.merchant = resp.data
        })

        this.$http.get(`category/merchant/${merchant_id}`, {}).then(resp => {
            this.categories = resp.data
            this.$nextTick(() => {
                let menuScroll = new BScroll(this.$refs.category,
                    {
                        scrollY: true,
                        click: true,
                        probeType: 2
                    }
                )
                let goodsScroll = new BScroll(this.$refs.goods,
                    {
                        scrollY: true,
                        click: true,
                        probeType: 2
                    }
                )

                this.menuScroll = menuScroll
                this.goodsScroll = goodsScroll

                goodsScroll.on('scroll', (position) => {
                    const y = position.y
                    let pos = this.positions;
                    for (let index = pos.length - 1; index >= 0; index--) {
                        let position = pos[index];
                        if (position <= Math.abs(y)) {
                            this.currentIndex = index;
                            break;
                        }
                    }
                })

                goodsScroll.on('scrollEnd', (position) => {
                    const y = position.y
                    let pos = this.positions;
                    for (let index = pos.length - 1; index >= 0; index--) {
                        let position = pos[index];
                        if (position <= Math.abs(y)) {
                            this.currentIndex = index;
                            break;
                        }
                    }
                })

                const pos = [0];
                let offset = 0;
                const dlList = document.getElementsByClassName('goods-dl');
                for (let dl of dlList) {
                    // console.log(dl)
                    offset += dl.clientHeight
                    pos.push(offset)
                }
                this.positions = pos

                this.menuScroll.refresh();
                this.goodsScroll.refresh();
            })
        })

        for(let category of this.categories){
            for(let goods of category.goods_list){
                goods.count = 0;
            }
        }

        // this.$nextTick(() => {
        //     let menuScroll = new BScroll(this.$refs.category,
        //         {
        //             scrollY: true,
        //             click: true,
        //             probeType: 2
        //         }
        //     )
        //     let goodsScroll = new BScroll(this.$refs.goods,
        //         {
        //             scrollY: true,
        //             click: true,
        //             probeType: 2
        //         }
        //     )
        //
        //     this.menuScroll = menuScroll
        //     this.goodsScroll = goodsScroll
        //
        //     goodsScroll.on('scroll', (position) => {
        //         const y = position.y
        //         let pos = this.positions;
        //         for (let index = pos.length - 1; index >= 0; index--) {
        //             let position = pos[index];
        //             if (position <= Math.abs(y)) {
        //                 this.currentIndex = index;
        //                 break;
        //             }
        //         }
        //     })
        //
        //     goodsScroll.on('scrollEnd', (position) => {
        //         const y = position.y
        //         let pos = this.positions;
        //         for (let index = pos.length - 1; index >= 0; index--) {
        //             let position = pos[index];
        //             if (position <= Math.abs(y)) {
        //                 this.currentIndex = index;
        //                 break;
        //             }
        //         }
        //     })
        //
        //     const pos = [0];
        //     let offset = 0;
        //     const dlList = document.getElementsByClassName('goods-dl');
        //     for (let dl of dlList) {
        //         // console.log(dl)
        //         offset += dl.clientHeight
        //         pos.push(offset)
        //     }
        //     this.positions = pos
        //
        //     this.menuScroll.refresh();
        //     this.goodsScroll.refresh();
        // })

    },
    computed: {
        goodDetail() {
            return goodDetail
        },
        menuHeightStyle() {
            const height = window.innerHeight - 200
            //  console.log(height)
            return {
                height: height + "px"
            }
        },

    },
    created() {

    }
}
</script>

<style scoped lang="scss">
.logo {
  height: 50px;
  width: 50px;
  margin: 15px 5px 0 20px;
}

.van-nav-bar {
  background-color: #2e2f3b;
}

.header-group {
  background-color: #2e2f3b;
}

.van-nav-bar__title {
  color: white !important;
}

.van-ellipsis {
  color: white !important;
}

.notice {
  margin-top: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.van-hairline--bottom:after {
  border: none;
}

.tab-group {
  .menu-group {
    display: flex;
    //background-color: red;
    .category-group {
      height: 100%;
      width: 80px;
      //background-color: aqua;
      text-align: center;
      overflow: hidden;

      .category-list {

        overflow: hidden;

        li {
          height: 50px;
          line-height: 50px;

          &.active {
            background-color: #ccc;
          }
        }
      }
    }

    .goods-group {
      overflow: hidden;
      margin-left: 10px;
      height: 100%;
      //background-color: beige;
      flex: 1;

      .category-name {
        font-size: 12px;
        height: 32px;
        line-height: 32px;
      }

      .goods-item {
        padding-bottom: 10px;
        display: flex;

        .stepper-group {
          margin-top: 30px;
          margin-right: 10px;
        }

        .thumbnail {
          width: 75px;
        }

        .goods-info {
          display: flex;
          flex: 1;
          flex-direction: column;
          justify-content: space-around;
          margin-left: 10px;

          .goods-name {
            font-size: 16px;
            font-weight: 600;
          }

          .price {
            color: #fb4eaa;
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>
